import { useEffect, useRef, useState, useCallback } from "react"; // 仅导入需要的hooks，去掉未用的React默认导入
import styles from "./Index.module.css";
import instance from "../../api/request";
import { Tabs } from "antd-mobile";
// import { useParams } from "react-router-dom"; // 暂时注释掉未使用的导入

function Index() {
  //视频分类
  const [tab, setTab] = useState<{ id: number; name: string }[]>([]); // 指定类型，防止推断为never

  //视频列表
  const [videoList, setVideoList] = useState<{ id: number; originalUrl: string; title?: string; abstracts?: string }[]>([]); // 指定类型，包含id和地址
  const [categoryId, setCategoryId] = useState<number>(1); // 当前分类id
  const page = 1; // 固定页码，简单处理
  const count = 5; // 固定每页数量

  // const {videoId} = useParams() // 路由参数，暂时注释掉未使用的变量

  //当前播放视频的弹幕状态
  const [currentVideoDanmu, setCurrentVideoDanmu] = useState<{ id: string; content: string; top: number; delay: number }[]>([]); // 当前视频的弹幕显示状态
  const [isDanmuOpen, setIsDanmuOpen] = useState(false); // 弹幕开关状态，默认关闭
  const [currentPlayingVideoId, setCurrentPlayingVideoId] = useState<number | null>(null); // 当前正在播放的视频ID
  const [usedTracks, setUsedTracks] = useState<Set<number>>(new Set()); // 已使用的弹幕轨道
  

  //弹幕开关切换函数
  const toggleDanmu = (videoId: number) => {
    const newState = !isDanmuOpen; // 计算新状态
    setIsDanmuOpen(newState); // 设置新状态
    setCurrentPlayingVideoId(videoId); // 设置当前视频ID
    
    console.log(`视频 ${videoId} 弹幕开关切换为:`, newState); // 调试信息
    
    // 如果开启弹幕，调用两个接口
    if (newState) {
      // 1. 发布评论接口
      instance.post('/api/user/video/verify/v1/addVideoComment',null,{
        params:{
          videoId: videoId, // 使用当前视频ID
          content:"测试评论"
        }
      }).then(res=>{
        console.log(res,'=====发布弹幕数据打印');
        
      }).catch(error => {
        // console.error('弹幕发送失败:', error);
      });

      // 2. 获取评论列表接口
      instance.get('/api/user/video/v1/findVideoCommentList', {
        params: {
          videoId: videoId, // 使用当前视频ID
        }
      }).then(res => {
        console.log(res, '=====弹幕列表数据打印');
        // 直接处理弹幕数据并显示
        const danmuData = res.data.result || [];
        if (danmuData.length > 0) {
          // 立即显示第一批弹幕（3-5条）
          const initialDanmu = [];
          for (let i = 0; i < Math.min(4, danmuData.length); i++) {
            const danmu = danmuData[i];
            const top = 8 + (i * 4); // 固定轨道位置，8%, 12%, 16%, 20%
            const delay = i * 0.5; // 错开时间，0, 0.5, 1, 1.5秒
            
            initialDanmu.push({
              id: `${danmu.id}-initial-${i}`,
              content: danmu.content,
              top: top,
              delay: delay
            });
          }
          setCurrentVideoDanmu(initialDanmu);
          
          // 开始弹幕播放定时器
          const danmuInterval = setInterval(() => {
            // 随机选择一条弹幕
            const randomDanmu = danmuData[Math.floor(Math.random() * danmuData.length)];
            if (randomDanmu) {
              // 固定轨道位置 (8%, 12%, 16%, 20%, 24%, 28%)
              const tracks = [8, 12, 16, 20, 24, 28];
              
              // 找到可用的轨道（未被占用的）
              let availableTrack = null;
              for (const track of tracks) {
                if (!usedTracks.has(track)) {
                  availableTrack = track;
                  break;
                }
              }
              
              // 如果没有可用轨道，等待下次
              if (availableTrack === null) {
                return;
              }
              
              // 标记轨道为已使用
              setUsedTracks(prev => new Set(prev).add(availableTrack!));
              
              // 随机延迟 (0-1秒)
              const delay = Math.random() * 1;
              
              const newDanmu = {
                id: `${randomDanmu.id}-${Date.now()}-${Math.random()}`,
                content: randomDanmu.content,
                top: availableTrack!,
                delay: delay
              };
              
              // 添加到当前弹幕显示列表
              setCurrentVideoDanmu(prev => [...prev, newDanmu]);
              
              // 10秒后自动移除这条弹幕并释放轨道
              setTimeout(() => {
                setCurrentVideoDanmu(prev => prev.filter(item => item.id !== newDanmu.id));
                setUsedTracks(prev => {
                  const newSet = new Set(prev);
                  newSet.delete(availableTrack!);
                  return newSet;
                });
              }, 10000);
            }
          }, 3000); // 每3秒添加一条新弹幕
          
          // 存储定时器ID，用于清理
          (window as unknown as { danmuInterval: number | null }).danmuInterval = danmuInterval;
        }
      }).catch(error => {
        console.error('获取弹幕列表失败:', error);
      });
    } else {
      // 关闭弹幕时清空弹幕显示和定时器
      setCurrentVideoDanmu([]);
      setUsedTracks(new Set()); // 清空轨道状态
      const windowWithDanmu = window as unknown as { danmuInterval: number | null };
      if (windowWithDanmu.danmuInterval) {
        clearInterval(windowWithDanmu.danmuInterval);
        windowWithDanmu.danmuInterval = null;
      }
    }
  }

  //存储视频元素的ref
  const videoRef = useRef<Array<HTMLVideoElement | null>>([]); // 明确为视频元素数组
  //存储内容器的ref
  const contentRef = useRef<HTMLDivElement | null>(null) // 列表容器ref，用于滚动监听

  //当某个视频开始播放时，暂停其他视频
  const handlePlay = useCallback((currentIndex: number) => { // 传入当前正在播放的视频下标
    videoRef.current.forEach((v, i) => { // 遍历所有video元素
      if (i !== currentIndex) { // 不是当前这个视频
        v?.pause(); // 暂停其它视频（安全可选链）
      }
    })
    
    // 设置当前播放的视频ID
    if (videoList[currentIndex]) {
      const newVideoId = videoList[currentIndex].id;
      
      // 只有视频ID真正改变时才更新状态
      setCurrentPlayingVideoId(prevId => {
        if (prevId === newVideoId) {
          return prevId; // 如果ID相同，不更新状态
        }
        
        // 清空之前的弹幕，让新视频重新开始
        setCurrentVideoDanmu([]);
        setUsedTracks(new Set()); // 清空轨道状态
        
        // 清理之前的定时器
        const windowWithDanmu = window as unknown as { danmuInterval: number | null };
        if (windowWithDanmu.danmuInterval) {
          clearInterval(windowWithDanmu.danmuInterval);
          windowWithDanmu.danmuInterval = null;
        }
        
        // 如果弹幕开关是开启的，为新视频重新获取弹幕数据
        if (isDanmuOpen) {
          // 重新获取弹幕数据
          instance.get('/api/user/video/v1/findVideoCommentList', {
            params: {
              videoId: newVideoId,
            }
          }).then(res => {
            // console.log(res, `=====视频${newVideoId}弹幕列表数据打印`);
            const danmuData = res.data.result || [];
            if (danmuData.length > 0) {
              // 立即显示第一批弹幕（3-5条）
              const initialDanmu = [];
              for (let i = 0; i < Math.min(4, danmuData.length); i++) {
                const danmu = danmuData[i];
                const top = 8 + (i * 4); // 固定轨道位置，8%, 12%, 16%, 20%
                const delay = i * 0.5; // 错开时间，0, 0.5, 1, 1.5秒
                
                initialDanmu.push({
                  id: `${danmu.id}-initial-${i}`,
                  content: danmu.content,
                  top: top,
                  delay: delay
                });
              }
              setCurrentVideoDanmu(initialDanmu);
              
              // 开始弹幕播放定时器
              const danmuInterval = setInterval(() => {
                // 随机选择一条弹幕
                const randomDanmu = danmuData[Math.floor(Math.random() * danmuData.length)];
                if (randomDanmu) {
                  // 固定轨道位置 (8%, 12%, 16%, 20%, 24%, 28%)
                  const tracks = [8, 12, 16, 20, 24, 28];
                  
                  // 找到可用的轨道（未被占用的）
                  setUsedTracks(prevTracks => {
                    let availableTrack = null;
                    for (const track of tracks) {
                      if (!prevTracks.has(track)) {
                        availableTrack = track;
                        break;
                      }
                    }
                    
                    // 如果没有可用轨道，等待下次
                    if (availableTrack === null) {
                      return prevTracks;
                    }
                    
                    // 标记轨道为已使用
                    const newTracks = new Set(prevTracks).add(availableTrack);
                    
                    // 随机延迟 (0-1秒)
                    const delay = Math.random() * 1;
                    
                    const newDanmu = {
                      id: `${randomDanmu.id}-${Date.now()}-${Math.random()}`,
                      content: randomDanmu.content,
                      top: availableTrack,
                      delay: delay
                    };
                    
                    // 添加到当前弹幕显示列表
                    setCurrentVideoDanmu(prev => [...prev, newDanmu]);
                    
                    // 10秒后自动移除这条弹幕并释放轨道
                    setTimeout(() => {
                      setCurrentVideoDanmu(prev => prev.filter(item => item.id !== newDanmu.id));
                      setUsedTracks(prev => {
                        const newSet = new Set(prev);
                        newSet.delete(availableTrack);
                        return newSet;
                      });
                    }, 10000);
                    
                    return newTracks;
                  });
                }
              }, 3000); // 每3秒添加一条新弹幕
              
              // 存储定时器ID，用于清理
              (window as unknown as { danmuInterval: number | null }).danmuInterval = danmuInterval;
            }
          }).catch(error => {
            console.error('获取弹幕列表失败:', error);
          });
        }
        
        return newVideoId;
      });
    }
  }, [videoList, isDanmuOpen]);

  useEffect(() => {
    instance.get("/api/user/video/v1/findVideoCategoryList").then((res) => {
      console.log(res, "=====视频tab");
      setTab(res.data.result);
      if (res.data.result.length > 0) {
        setCategoryId(res.data.result[0].id);
      }
    });
  }, []);

  useEffect(() => {
    instance
      .get("/api/user/video/v1/findVideoVoList", {
        params: {
          categoryId: categoryId,
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res, "=====视频列表");
        setVideoList(res.data.result);
      });
  }, [categoryId, page, count]);

  useEffect(() => { // 监听容器滚动，控制视频播放状态
    const handleScroll = () => { // 滚动时回调
      if (!contentRef.current) return; // 容器不存在则返回
      const crect = contentRef.current.getBoundingClientRect(); // 容器可视区域
      videoRef.current.forEach((video, idx) => { // 遍历所有视频
        if (!video) return; // 空值跳过
        const rect = video.getBoundingClientRect(); // 视频矩形
        const visibleHeight = Math.min(rect.bottom, crect.bottom) - Math.max(rect.top, crect.top); // 可见高度
        const ratio = visibleHeight / rect.height; // 可见比例
        if (ratio > 0.6) { // 超过60%认为在当前视口
          video.play().catch(() => {}); // 播放当前
          handlePlay(idx); // 暂停其他
        } else {
          video.pause(); // 不在视口则暂停
        }
      });
    };

    const content = contentRef.current; // 获取容器
    if (content) { // 存在容器再绑定
      handleScroll(); // 初始化检查一次
      content.addEventListener('scroll', handleScroll); // 监听滚动
      window.addEventListener('resize', handleScroll); // 窗口大小变化也检查
    }
    return () => { // 组件卸载时移除监听
      if (content) {
        content.removeEventListener('scroll', handleScroll); // 解绑滚动
      }
      window.removeEventListener('resize', handleScroll); // 解绑resize
    };
  }, [videoList, handlePlay]); // 视频列表变化时重新监听

  // 监听视频切换，清空弹幕显示
  useEffect(() => {
    // 当视频列表变化时，清空弹幕显示
    setCurrentVideoDanmu([]);
    setUsedTracks(new Set()); // 清空轨道状态
    setCurrentPlayingVideoId(null); // 重置当前播放视频ID
    // 清理定时器
    const windowWithDanmu = window as unknown as { danmuInterval: number | null };
    if (windowWithDanmu.danmuInterval) {
      clearInterval(windowWithDanmu.danmuInterval);
      windowWithDanmu.danmuInterval = null;
    }
  }, [videoList]);

  return (
    <div className={styles.video}>
      <div className={styles.tab}>
        <Tabs activeKey={String(categoryId)} onChange={(key)=>setCategoryId(Number(key))} className={styles.top}>
          {tab.map((item) => {
            return <Tabs.Tab title={item.name} key={String(item.id)}></Tabs.Tab>;
          })}
        </Tabs>
      </div>

      <div className={styles.videoList} ref={contentRef}>
        {Array.isArray(videoList) && videoList.map((item, index) => {
          return (
            <div key={item.id} className={styles.videoContainer}>
              {/* 视频播放器 */}
              <div className={styles.videoPlayer}>
                <video
                  className={styles.videoItem}
                  src={item.originalUrl}
                  controls
                  loop
                  playsInline
                  data-index={index}
                  muted
                  ref={(el) => { if (el) { videoRef.current[index] = el } }}
                  onPlay={()=>handlePlay(index)}
                />
              </div>

              {/* 弹幕容器 - 在视频上方显示 */}
              {isDanmuOpen && currentPlayingVideoId === item.id && (
                <div className={styles.danmuContainer}>
                  {currentVideoDanmu.map((item) => (
                    <div
                      key={item.id}
                      className={styles.danmuItem}
                      style={{
                        top: `${item.top}%`, // 随机垂直位置
                        animationDelay: `${item.delay}s`, // 随机延迟
                        right: '100vw', // 从右侧屏幕外开始
                      }}
                    >
                      {item.content}
                    </div>
                  ))}
                </div>
              )}

              {/* 右侧操作按钮 */}
              <div className={styles.videoActions}>
                <div className={styles.actionItem}>
                  <div className={styles.priceIcon}><img src="./hongqian.png" alt="" /></div>
                 
                </div>
                <div className={styles.actionItem}>
                  <div className={styles.starIcon}><img src="./shouda.png" alt="" /></div>
                </div>
                {/* 弹幕开关按钮 */}
                <div className={styles.actionItem}>
                  <div onClick={() => toggleDanmu(item.id)}>
                    <img 
                      src={isDanmuOpen ? "./dank.png" : "./dang.png"} 
                      alt={isDanmuOpen ? "开启弹幕" : "关闭弹幕"} 
                    />
                  </div>
                </div>
              </div>

              {/* 底部信息区域 */}
              <div className={styles.videoInfo}>
                <div className={styles.videoTitle}>{item.title || '健身'}</div>
                <div className={styles.videoDescription}>
                 {item.abstracts }
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Index;